<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>深州区紧密型县域医共体运营平台</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <!-- 头部模块 -->
    <header>
      <h1><span>深州区紧密型县域医共体运营平台</span></h1>
      <p><span>Medical Community Operation Platform</span></p>
    </header>

    <div class="main">
      <!-- top5 -->
      <div class="top5">
        <div class="top5-title">
          <span>医疗机构业务情况</span>
        </div>
        <div class="top5-content">
          <ul>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>县人民医院</span>
                <span>1579</span>
                <span>24.1%</span>
                <span><img src="./images/up.png" alt="" /></span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>县中医院</span>
                <span>1148</span>
                <span>17.5%</span>
                <span><img src="./images/up.png" alt="" /></span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>县妇幼保健院</span>
                <span>798</span>
                <span>12.2%</span>
                <span><img src="./images/up.png" alt="" /></span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>乡镇卫生院</span>
                <span>2340</span>
                <span>35.7%</span>
                <span><img src="./images/up.png" alt="" /></span>
              </div>
            </li>
            <li>
              <div class="cicle"></div>
              <div class="li-content">
                <span>村卫生室</span>
                <span>680</span>
                <span>10.4%</span>
                <span><img src="./images/down.png" alt="" /></span>
              </div>
            </li>
          </ul>
        </div>
        <div class="top5-title">
          <span>医疗服务分析</span>
        </div>
      </div>
      <!-- 销售总额 -->
      <div class="total">
        <div class="data1">
          <span>本年出院人次</span>
          <p>925,524,000</p>
        </div>
        <div class="data2">
          <span>本年门急诊人次</span>
          <p>440,960,200</p>
        </div>
        <div class="data3">
          <span>本年手术台次</span>
          <p>968,528</p>
        </div>
        <div class="data4">
          <span>今日门诊人次</span>
          <p>2810</p>
        </div>
        <canvas class="rain"></canvas>
        <canvas class="dashed"></canvas>
        <div class="sphere">
          <div class="sphere-bg"></div>
          <div class="sum">
            <span>今日出院人次</span>
            <p>590</p>
          </div>
        </div>
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <div class="cicle8">
          <span>0.22%</span>
          <p>病床使用率</p>
        </div>
        <div class="cicle9">
          <span>0.00%</span>
          <p>转诊率</p>
        </div>
        <div class="cicle10">
          <span>0.15%</span>
          <p>县域就诊率</p>
        </div>
        <div class="cicle11">
          <span>0.05%</span>
          <p>基层诊疗量占比</p>
        </div>
      </div>
      <!-- 会销分析 -->
      <div class="analyse">
        <div class="analyse-title">
          <span>医共体运营分析</span>
        </div>
        <ul>
          <li>
            <img src="./images/s1.png" alt="" />
            <h5>医疗收入</h5>
            <br />
            <span>Medical Revenue</span><br />
            <em>￥925,524,000</em>
          </li>
          <li>
            <img src="./images/s3.png" alt="" />
            <h5>药品收入</h5>
            <br />
            <span>Drug Revenue</span><br />
            <em>￥440,960,200</em>
          </li>
          <li>
            <img src="./images/s2.png" alt="" />
            <h5>检查收入</h5>
            <br />
            <span>Examination Revenue</span><br />
            <em>￥968,528</em>
          </li>
        </ul>
        <div class="execution">
          <div class="title">运营情况</div>
          <div class="cicle1"></div>
          <div class="cicle2"></div>
          <div class="waterChart1">
            <div class="chart-title">医保基金使用率</div>
            <div class="chart1"></div>
          </div>
          <div class="waterChart2">
            <div class="chart-title">县域内就诊率</div>
            <div class="chart2"></div>
          </div>
        </div>
      </div>
      <!-- 鞋服配销售分析 -->
      <div class="sale">
        <ul>
          <li>
            <div class="showImg">
              <img src="./images/shoe.png" alt="" />
            </div>
            <div class="data">
              <span>门诊</span>
              <span>2810</span>
            </div>
            <div class="shoeChart"></div>
          </li>
          <li>
            <div class="showImg">
              <img src="./images/clothes.png" alt="" />
            </div>
            <div class="data">
              <span>住院</span>
              <span>590</span>
            </div>
            <div class="clothesChart"></div>
          </li>
          <li>
            <div class="showImg">
              <img src="./images/mz.png" alt="" />
            </div>
            <div class="data">
              <span>急诊</span>
              <span>2318</span>
            </div>
            <div class="mzChart"></div>
          </li>
        </ul>
      </div>
      <!-- 折线图 -->
      <div class="lineChart"></div>
    </div>

    <!-- 十大中心模块 -->
    <div class="ten-centers">
      <canvas class="centers-lines"></canvas>
      <div class="centers-container">
        <div class="center-item" data-center="影像">
          <div class="center-icon">
            <div class="icon-bg icon-imaging"></div>
          </div>
          <div class="center-name">影像 156</div>
        </div>
        <div class="center-item" data-center="心电">
          <div class="center-icon">
            <div class="icon-bg icon-ecg"></div>
          </div>
          <div class="center-name">心电 89</div>
        </div>
        <div class="center-item" data-center="检验">
          <div class="center-icon">
            <div class="icon-bg icon-lab"></div>
          </div>
          <div class="center-name">检验 234</div>
        </div>
        <div class="center-item" data-center="病理">
          <div class="center-icon">
            <div class="icon-bg icon-pathology"></div>
          </div>
          <div class="center-name">病理 23</div>
        </div>
        <div class="center-item" data-center="审方">
          <div class="center-icon">
            <div class="icon-bg icon-pharmacy"></div>
          </div>
          <div class="center-name">审方 567</div>
        </div>
        <div class="center-item" data-center="会诊">
          <div class="center-icon">
            <div class="icon-bg icon-consult"></div>
          </div>
          <div class="center-name">会诊 12</div>
        </div>
        <div class="center-item" data-center="消供">
          <div class="center-icon">
            <div class="icon-bg icon-supply"></div>
          </div>
          <div class="center-name">消供 345</div>
        </div>
        <div class="center-item" data-center="急救">
          <div class="center-icon">
            <div class="icon-bg icon-emergency"></div>
          </div>
          <div class="center-name">急救 15</div>
        </div>
        <div class="center-item" data-center="慢病">
          <div class="center-icon">
            <div class="icon-bg icon-chronic"></div>
          </div>
          <div class="center-name">慢病 2456</div>
        </div>
        <div class="center-item" data-center="结算">
          <div class="center-icon">
            <div class="icon-bg icon-billing"></div>
          </div>
          <div class="center-name">结算 1234</div>
        </div>
      </div>
    </div>

    <!-- 底部模块 -->
    <div class="bottom">
      <h5><span>医共体数据监控</span></h5>
      <p>Medical Community Data Monitoring</p>
    </div>
  </body>
  <script src="./js/jquery-1.11.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script>
  <script src="./js/main.js"></script>
</html>
